<template>
  <h1>useTrendsForm</h1>
  <f-button class="" @click="handleOpen">useTrendsForm</f-button>
</template>

<script setup>
import { ref, h, watch } from 'vue';
import { randomNum, randomStr } from 'fok-js';
import { useTrendsForm } from '../../packages/index';

const handleOpen = () => {
  const id = randomNum(1, 100).toString();
  const guid = randomStr(8);

  const { show, result, cancel, confirm } = useTrendsForm({
    type: 'modal',
    // type: 'drawer',
    title: '回馈表单1',
    showMask: false,
    maskClosable: true,
    width: 'S',
    form: {
      model: { id: id, guid: guid },
      // layout: 'vertical',
      columns: [
        {
          label: '分钟1',
          columns: [
            { label: 'id', field: 'id', required: true },
            { label: 'guid', field: 'guid', required: true }
          ]
        },
        {
          label: '分钟2',
          columns: [
            { label: 'id', field: 'id', required: true },
            { label: 'guid', field: 'guid', required: true }
          ]
        }

        // { label: "input3", field: "input3" },
        // { label: "input4", field: "input4" },
        // { label: "input5", field: "input5" },
        // { label: "number", field: "number", type: "input-number" },
      ]
      // onChange: (field,value,formData) => console.log(field,value,formData)
    },
    onClose: (data) => {
      console.log('on close', data);
    }
  });
  show();
  confirm((res) => {
    console.log('then:result1', res);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('then:result2', res);
        // cancel();
        resolve();
        // reject();
      }, 1000 * 2);
    });
  });
  watch(
    () => result.value,
    (data) => {
      console.log('watch:result', data);
      // cancel();
    }
  );
};
</script>

<style lang="scss"></style>
